// 组件 provide 和 inject 功能
import { h,provide,inject } from '../../lib/guide-leo-vue.esm.js'

const Provider = {
    name:'Provider',
    setup() {
        provide('foo','fooVal')
        provide('bar','barVal')
    },
    render() {
        return h("div",{},[h('p',{},"Provider"),h(ProviderTwo)])
    },
}

const ProviderTwo = {
    name:'ProviderTwo',
    setup() {
        provide('foo','fooTwo')
        const foo = inject("foo")
        return {
            foo
        }
    },
    render() {
        return h("div",{},[h('p',{},`ProviderTwo ${this.foo}`),h(Consumer)])
    },
}

const Consumer = {
    name:'Consumer',
    setup() {
        const foo = inject("foo")
        const bar = inject("bar")
        const newVal = inject("newVal","defaultValue")
        const newVal2 = inject("newVal",()=>"defaultValueFunction")
        return {
            foo,
            bar,
            newVal,
            newVal2
        }
    },
    render() {
        return h('div',{},`Consumer ${this.foo}-${this.bar}-${this.newVal}-${this.newVal2}`)
    }
}

export default Provider